<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <style type="text/css">
    #Loading {
      top: 50%;
      left: 50%;
      position: absolute;
      -webkit-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%);
      z-index: 100;
    }

    @-webkit-keyframes rotate_pacman_half_up {
      0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
      }

      50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }

      100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
      }
    }

    @keyframes rotate_pacman_half_up {
      0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
      }

      50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }

      100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
      }
    }

    @-webkit-keyframes rotate_pacman_half_down {
      0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }

      50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    }

    @keyframes rotate_pacman_half_down {
      0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }

      50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    }

    @-webkit-keyframes pacman-balls {
      75% {
        opacity: 0.7;
      }

      100% {
        -webkit-transform: translate(-100px, -6.25px);
        transform: translate(-100px, -6.25px);
      }
    }

    @keyframes pacman-balls {
      75% {
        opacity: 0.7;
      }

      100% {
        -webkit-transform: translate(-100px, -6.25px);
        transform: translate(-100px, -6.25px);
      }
    }

    .pacman {
      position: relative;
    }

    .pacman>div:nth-child(2) {
      -webkit-animation: pacman-balls 1s -0.99s infinite linear;
      animation: pacman-balls 1s -0.99s infinite linear;
    }

    .pacman>div:nth-child(3) {
      -webkit-animation: pacman-balls 1s -0.66s infinite linear;
      animation: pacman-balls 1s -0.66s infinite linear;
    }

    .pacman>div:nth-child(4) {
      -webkit-animation: pacman-balls 1s -0.33s infinite linear;
      animation: pacman-balls 1s -0.33s infinite linear;
    }

    .pacman>div:nth-child(5) {
      -webkit-animation: pacman-balls 1s 0s infinite linear;
      animation: pacman-balls 1s 0s infinite linear;
    }

    .pacman>div:first-of-type {
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-top: 25px solid #fbd132;
      border-left: 25px solid #fbd132;
      border-bottom: 25px solid #fbd132;
      border-radius: 25px;
      -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
      animation: rotate_pacman_half_up 0.5s 0s infinite;
      position: relative;
      left: -30px;
    }

    .pacman>div:nth-child(2) {
      width: 0px;
      height: 0px;
      border-right: 25px solid transparent;
      border-top: 25px solid #fbd132;
      border-left: 25px solid #fbd132;
      border-bottom: 25px solid #fbd132;
      border-radius: 25px;
      -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
      animation: rotate_pacman_half_down 0.5s 0s infinite;
      margin-top: -50px;
      position: relative;
      left: -30px;
    }

    .pacman>div:nth-child(3),
    .pacman>div:nth-child(4),
    .pacman>div:nth-child(5),
    .pacman>div:nth-child(6) {
      background-color: #fbd132;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 2px;
      width: 10px;
      height: 10px;
      position: absolute;
      -webkit-transform: translate(0, -6.25px);
      transform: translate(0, -6.25px);
      top: 25px;
      left: 70px;
    }
  </style>

</head>

<body>

  <div id="Loading">
    <div class="pacman">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div id="app">
  </div>
   <!-- built files will be auto injected -->
</body>

</html>
